<template>
  <view class="disFlx bgf flex-wrap justify-between px-12">
    <view
      class="disFlxCC gap-4"
      v-for="(item, index) in numDatas"
      :key="index"
      style="width: 222rpx; height: 160rpx"
    >
      <text class="fz-18 linh-28 font-bold">{{ item.num }}</text>
      <view class="disFlxAC" style="color: #969799" @click="item.fn">
        <text class="fz-12 linh-16">{{ item.text }}</text>
        <text class="ali-icon fz-12" @click="item.fn">&#xe67b;</text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import type { ISupplyDemandDetailsResult } from '@/api/businessOpportunities/type';
  import { navigateTo } from '@/router';
  import { computed, type PropType } from 'vue';

  const props = defineProps({
    data: Object as PropType<ISupplyDemandDetailsResult>,
  });

  const numDatas = computed(() => {
    return [
      {
        num: props.data?.browsePeopleNum,
        text: '浏览人数',
        fn: toDetail,
      },
      { num: props.data?.browseNum, text: '浏览次数', fn: toDetail },
      { num: props.data?.collectPeopleNum, text: '收藏人数', fn: toDetail },
      { num: props.data?.cooperationNum, text: '合作意向', fn: toDetail },
      { num: props.data?.noContactNum, text: '待联系', fn: toDetail },
      { num: props.data?.cooperationSuccessNum, text: '已联系', fn: toDetail },
    ];
  });

  const toDetail = () => {
    navigateTo({
      name: 'businessOpportunitiesData',
      options: {
        boInfoId: props.data?.id!,
      },
    });
  };
</script>
<style lang="scss" scoped></style>
